<template>
	<div class="wscn-http404-container">
		<div class="wscn-http404">
			<div class="pic-404">
				<img class="pic-404__parent" src="../assets/404.png" alt="404">
			</div>
			<div class="bullshit">
				<div class="bullshit__oops">OOPS!</div>
				<div class="bullshit__info">All rights reserved
					<a style="color:#20a0ff" href="/" target="_blank">dashboard</a>
				</div>
				<div class="bullshit__headline">{{ message }}</div>
				<div class="bullshit__info">请检查您输入的网址是否正确，或者点击下面的按钮返回主页。</div>
				<a href="" class="bullshit__return-home">返回主页</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Page404',
		computed: {
			message() {
				return '哎呀，您访问的页面找不到啦！'
			}
		}
	}
</script>

<style scoped>
	a {
		text-decoration: none;
	}

	.wscn-http404-container {
		transform: translate(-50%, -50%);
		position: absolute;
		top: 40%;
		left: 50%;
	}

	.wscn-http404 {
		box-sizing: border-box;
		position: relative;
		width: 992px;
		padding: 0 50px;
		overflow: hidden;
	}

	.wscn-http404 .pic-404 {
		position: relative;
		float: left;
		width: 50%;
		overflow: hidden;
	}

	.wscn-http404 .pic-404__parent {
		width: 100%;
	}

	.wscn-http404 .bullshit {
		position: relative;
		float: left;
		width: 300px;
		padding: 30px 0;
		overflow: hidden;
	}

	.wscn-http404 .bullshit__oops {
		font-size: 32px;
		font-weight: bold;
		line-height: 40px;
		color: #1482f0;
		margin-bottom: 20px;
	}

	.wscn-http404 .bullshit__info {
		font-size: 13px;
		line-height: 21px;
		color: grey;
		margin-bottom: 30px;
	}

	.wscn-http404 .bullshit__headline {
		font-size: 20px;
		font-weight: bold;
		line-height: 24px;
		color: #222;
		margin-bottom: 10px;
	}

	.wscn-http404 .bullshit__return-home {
		display: block;
		float: left;
		width: 110px;
		height: 36px;
		background: #1482f0;
		border-radius: 100px;
		text-align: center;
		color: #fff;
		font-size: 14px;
		line-height: 36px;
		cursor: pointer;
	}
	
	@media (max-width: 991px) {
		.wscn-http404 {
			width: 90%;
		}
	}
</style>
